<template>
    <div class="header flex mb-20 pt-20">
        <div class="user" @click="$router.push('/userCenter')"><img
                :src="require(`@/assets/theme/${theme}/image/Group.png`)" alt=""></div>
        <div class="styleWh tabBackground h-60 rounded-full flex items-center">
            <img src="@/assets/image/icon-search.png" alt="logo" class="w-32 h-32 mx-16" />
            <input type="text" v-model="keywords" @click="$router.push('/search')" :placeholder="$t('搜索币种')"
                class="h-full flex-1 border-none bg-none textColor" @input="onInput" />
        </div>
        <div class="custom" @click="tokefu">
            <!-- <img src="@/assets/image/customer.png" alt=""> -->
            <van-icon class="font-45" :name="require(`@/assets/image/customer.png`)" :badge="`${unread_num}`">
            </van-icon>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    props: {
        unread_num: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            keywords: '',
            inputTimeout: null,
            active: 1,
            tabList: [
                { id: 1, text: this.$t('自选'), data: [], loading: true },
                { id: 2, text: this.$t('现货'), data: [], loading: true },
                { id: 3, text: this.$t('合约'), data: [], loading: true }
            ],
        }
    },
    computed: {
        ...mapGetters({
            theme: 'home/theme'
        }),
    },
    methods: {
        onInput() { // 输入
            if (this.inputTimeout) {
                clearTimeout(this.inputTimeout)
                this.inputTimeout = null
            }
            this.inputTimeout = setTimeout(() => {
                this.getFilterData()
            }, 50)
        },
        getFilterData() { // 过滤后的数据
            const index = this.active / 1 - 1
            //console.log(index)
            this.tabList[index]['data'] = this.tabList[index]['data'].filter(item => item.symbol.includes(this.keywords))
        },
        tokefu() {
            this.$router.push('/customerService')
        }
    }
}
</script>

<style lang="scss" scoped>
.header {
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;

    .user {
        width: 66px;
        height: 66px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .custom {
        width: 44px;
        height: 44px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}

.styleWh {
    margin-left: 22px;
    margin-right: 26px;
    flex: 1;
}
</style>